<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { logout as apiLogout } from '@/api/auth.js'

const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)

// 头像与名称（可按需从后端获取并缓存）
const adminName = ref(localStorage.getItem('adminName') || '管理员')

const adminAvatar = ref(localStorage.getItem('adminAvatar') || '')

const onSelect = (index) => {
  router.push(index)
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定退出登录吗？', '提示', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: 'warning',
    })
  } catch {
    return
  }
  try {
    const res = await apiLogout()
    if (String(res?.code) === '200') {
      ElMessage.success(res?.msg || '已退出登录')
    } else {
      ElMessage.info('已退出登录')
    }
  } finally {
    router.push('/login')
  }
}
</script>

<template>
  <el-container style="height: 100vh">
    <el-header :background-color="'#2F4050'" height="56px" class="header">
      <div class="header-left">
        <el-button link class="collapse-btn-header" @click="isCollapse = !isCollapse">
          <el-icon v-if="isCollapse"><Expand /></el-icon>
          <el-icon v-else><Fold /></el-icon>
        </el-button>
        <div class="logo">电影后台管理</div>
      </div>
      <div class="spacer" />
      <div class="header-right">
        <el-dropdown>
          <span class="el-dropdown-link" style="display:flex; align-items:center; color:#fff;">
            <!-- <el-avatar :size="28" :src="adminAvatar || undefined">
              {{ (adminName || '').slice(0,1) || '管' }}
            </el-avatar> -->
            <span class="admin-name">{{ adminName }}</span>
            <el-icon style="margin-left:4px;"><CaretBottom /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="router.push('/home')">
                <el-icon><HomeFilled /></el-icon>
                返回首页
              </el-dropdown-item> -->
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button class="logout-btn" link @click="handleLogout">
          <el-icon><SwitchButton /></el-icon>
          退出
        </el-button> -->
      </div>
    </el-header>

    <el-container>
      <el-aside :width="isCollapse ? '64px' : '220px'" class="aside">
        <div class="aside-top"></div>
        <el-menu :default-active="route.path" :collapse="isCollapse" router @select="onSelect" :background-color="'#2F4050'" :text-color="'#b8c7ce'" :active-text-color="'#fff'">
          <el-menu-item index="/admin/dashboard">
            <el-icon><House /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/admin/movies">
            <el-icon><Film /></el-icon>
            <span>电影管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/cinema">
            <el-icon><OfficeBuilding /></el-icon>
            <span>影院管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/ticket">
            <el-icon><Tickets /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/user">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/comment">
            <el-icon><ChatLineSquare /></el-icon>
            <span>评论管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/save">
            <el-icon><Star /></el-icon>
            <span>收藏管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #334557; /* 顶部加深色 */
  color: #fff;
  border-bottom: none;
}
.logo {
  font-weight: 600;
  color: #fff;
}
.spacer {
  flex: 1;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aside-top {
  padding: 6px 12px; /* 保留轻微上边距使菜单不顶格 */
}
.collapse-btn-header {
  color: #fff;
  border-color: transparent;
  padding: 0;
  width: 30px;
  font-size: 22px;
}
.aside {
  border-right: none;
  background-color: #2F4050;
  transition: width 0.2s ease;
}
.collapse-btn {
  color: #b8c7ce;
  border-color: transparent;
  padding-left: 0;
}
.main {
  background: #fff;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-name {
  margin-left: 8px;
  font-weight: 500;
}
.logout-btn {
  color: #fff;
  opacity: 0.9;
}
</style>